<template>
	<div class="article">
		<el-col :span="24" offset="5">
		<div class="info" style="
        overflow: hidden;
        padding: 1.5rem;
        background: #fff;
        box-shadow: 0 2px 5px 0 hsla(0, 0%, 57%, 0.1);
        transition: all 0.6s ease;
        width: 75%;
      ">
			<div class="article-title" style="
			margin-bottom: 15px;
			font-weight: 700;
			font-size: 18px;
			cursor: pointer;
			">
				{{ article && article.title }}
			</div>

			<div class="article-content" v-html="brief"></div>

			<div class="article-cover" style="text-align: center;">
				<img :src="article.cover" alt="" style="width: auto;height: auto;max-width: 60%;max-height: 60%; " />
			</div>
			
			<div class="ql-container ql-snow">
				<div class="ql-editor" v-html="article.body"></div>
				<div v-for="(item,index) in article.files" :key="index">
						<el-link :href="item.url" target="_blank">{{item.name}}</el-link></div>
			</div>
			<div style="margin-top: 30px">
				<div class="article-category" style="float: left; padding: 0 10px 0 0">
					<i class="el-icon-menu" />
					<span v-for="item in article.categories" :key="item">{{item}} </span>
				</div>
				<div class="article-time" style="float: right; padding: 0 10px 0 0">
					<i class="el-icon-alarm-clock">编辑时间：</i>{{article.editTime}}
				</div>
			</div>
		</div>
		</el-col>
	</div>
</template>

<script>
	import 'quill/dist/quill.core.css'
	import 'quill/dist/quill.snow.css'
	import 'quill/dist/quill.bubble.css'
	import 'quill'  //引入编辑器
	export default {
		
		props: {
			id: {}
		},
		data() {
			return {
				article: {
					picture: '',
					cover: '',
					tags: [],
					categories: [],
					editTime: '',
					createTime: '',
					id: ''
				},
			}
		},
		methods: {
			async fetch() {
				const res = await this.$http.get(`rest/articles/${this.id}`)
				this.article = res.data
				console.log(this.id)
			},
		},
		created() {
			this.id && this.fetch()
		}
	};
</script>

<style>
	.article {
		display: flex;
		padding: 10px 0;
		/*border-bottom: 1px solid #dbdbdb;*/
	}

	.article-title {
		font-size: 16px;
		font-weight: 500;
		color: #000000;
		text-align: center;
	}

	.article-time {
		/*margin: 10px 0;*/
		color: #c5c5c5;
	}

	.article-content,
	.article-author,
	.article-category,
	.article-view,
	.article-time {
		
		color: #999;
	}

	.article-cover {
		flex: none;

	}
</style>
